<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/static/css/record.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field">
        <legend>商品统计</legend>
        <div class="layui-field-box">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">搜索条件</div>
                        <div class="layui-card-body" pad15>
                            <div class="layui-form-item">
                                <label class="layui-form-label">搜索时间</label>

                                <div class="layui-input-block">
                                    <button class="layui-btn {if condition='$status eq 0'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="0">全部
                                    </button>

                                    <button class="layui-btn {if condition='$status eq 1'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="1">今天
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 2'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="2">本周
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 3'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="3">本月
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 4'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="4">本年
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 5'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm" id="custom">自定义
                                    </button>
                                    <div class="layui-btn {if condition='$status eq 5'}layui-btn-disabled{else/}layui-btn-primary layui-hide{/if} layui-btn-sm" id="test">
                                        {$dateTime}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            商品数量
                            <span class="layui-badge layuiadmin-badge layui-bg-blue">件</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$count.whole}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            新增商品
                            <span class="layui-badge layuiadmin-badge layui-bg-blue">件</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$count.news}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            活动商品
                            <span class="layui-badge layuiadmin-badge layui-bg-blue">件</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">0</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            缺货商品
                            <span class="layui-badge layuiadmin-badge layui-bg-blue">件</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$count.shortage}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            下架商品
                            <span class="layui-badge layuiadmin-badge layui-bg-blue">件</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$count.lower}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-sm6 layui-col-md4">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            回收站商品
                            <span class="layui-badge layuiadmin-badge layui-bg-blue">件</span>
                        </div>
                        <div class="layui-card-body">
                            <p class="layuiadmin-big-font">{$count.is_del}</p>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">图表展示</div>
                        <div class="layui-card-body" pad15>
                            <div id="main" style="width: 100%;height: 400px;"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">销量排行&nbsp;&nbsp;&nbsp;<span class="layui-badge layui-bg-orange">TOP5</span></div>
                        <div class="layui-card-body" id="sort" pad15>
                            <p class="layuiadmin-normal-font">商品销售总计：<span style="color: lightblue;">{$ranking.count ? $ranking.count : 0}</span> 件 共计 <span style="color: coral;">{$ranking.money ? $ranking.money : '0.00'}</span>元</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</div>
<script type="text/javascript" src="/static/layuiadmin/layui/layui.js"></script>
<script src="/static/js/echarts.js"></script>
<!-- 引入 walden 主题 -->
<script src="/static/theme/walden.js"></script>
<script>
    layui.config({
        version: true,
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'laydate', 'element'], function () {
        var $ = layui.jquery,
                laydate = layui.laydate,
                element = layui.element;

        if ('{$ranking.data}'){
            var rankindData = JSON.parse('{$ranking.data}');
            for (var i = 0; i < rankindData.length; i++){
                $("#sort").append('<div class="layuiadmin-card-list" style="padding: 1px;">' +
                        '<span>'+ rankindData[i].name +'</span>' +
                        '<div class="layui-progress layui-progress-big" lay-filter="demo{$i}" lay-showPercent="yes">' +
                        '<div class="layui-progress-bar '+ rankindData[i].class +'" style="width: '+ rankindData[i].scale +'%;">' +
                        '<span class="layui-progress-text">'+ rankindData[i].num +'</span>' +
                        '</div></div></div>');
            }
        }

        $('#custom').on('click', function(e){ //假设 test1 是一个按钮
            $("#test").removeClass('layui-hide');//外部事件调用
            laydate.render({
                elem: '#test'
                ,show: true //直接显示
                ,range: true
                ,closeStop: '#custom' //这里代表的意思是：点击 test1 所在元素阻止关闭事件冒泡。如果不设定，则无法弹出控件
                ,done: function(value){
                    window.location.href = '/admin/Record/product_statistics/status/5/dateTime/' + value;
                }
            });
        });

        //条件
        $(".status").click(function () {
            var status = $(this).data('status');
            window.location.href = '/admin/Record/product_statistics/status/' + status;
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'), 'walden');
        var data = '{$data}';
        data = JSON.parse(data);
        var dateList = [];
        var valueCount = [];
        var valueNUM = [];
        for(var i in data) {
            dateList.push(i);
            valueCount.push(data[i].count);
            valueNUM.push(data[i].num);
        }

        var option = {
            title: {
                text: '全部商品({$count.whole})件'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['商品新增数量', '当天销量']
            },
            xAxis: {
                data: dateList
            },
            yAxis: {},
            series: [{
                name: '商品新增数量',
                type: 'line',
                data: valueCount
            },{
                name: '当天销量',
                type: 'line',
                data: valueNUM
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    });
</script>
</body>
</html>